<template>
  <dv-border-box1 style="padding: 10px" :color="color" :backgroundColor="backgroundColor" :reverse='reverse' v-if="level==1">
    <slot></slot>
  </dv-border-box1>
  <dv-border-box2 style="padding: 10px" :color="color" :backgroundColor="backgroundColor" :reverse='reverse' v-else-if="level==2">
    <slot></slot>
  </dv-border-box2>
  <dv-border-box3 style="padding: 10px" :color="color" :backgroundColor="backgroundColor" :reverse='reverse' v-else-if="level==3">
    <slot></slot>
  </dv-border-box3>
  <dv-border-box4 style="padding: 10px" :color="color" :backgroundColor="backgroundColor" :reverse='reverse' v-else-if="level==4">
    <slot></slot>
  </dv-border-box4>
  <dv-border-box5 style="padding: 10px" :color="color" :backgroundColor="backgroundColor" :reverse='reverse' v-else-if="level==5">
    <slot></slot>
  </dv-border-box5>
  <dv-border-box6 style="padding: 10px" :color="color" :backgroundColor="backgroundColor" :reverse='reverse' v-else-if="level==6">
    <slot></slot>
  </dv-border-box6>
  <dv-border-box7 style="padding: 10px" :color="color" :backgroundColor="backgroundColor" :reverse='reverse' v-else-if="level==7">
    <slot></slot>
  </dv-border-box7>
  <dv-border-box8 style="padding: 10px" :color="color" :backgroundColor="backgroundColor" :reverse='reverse' v-else-if="level==8">
    <slot></slot>
  </dv-border-box8>
  <dv-border-box9 style="padding: 10px" :color="color" :backgroundColor="backgroundColor" :reverse='reverse' v-else-if="level==9">
    <slot></slot>
  </dv-border-box9>
  <dv-border-box10 style="padding: 10px" :color="color" :backgroundColor="backgroundColor" :reverse='reverse' v-else-if="level==10">
    <slot></slot>
  </dv-border-box10>
  <dv-border-box11 style="padding: 10px" :color="color" :backgroundColor="backgroundColor" :reverse='reverse' :title="title"
                   v-else-if="level==11">
    <slot></slot>
  </dv-border-box11>
  <dv-border-box12 style="padding: 10px" :color="color" :backgroundColor="backgroundColor" :reverse='reverse' v-else-if="level==12">
    <slot></slot>
  </dv-border-box12>
  <dv-border-box13 style="padding: 10px" :color="color" :backgroundColor="backgroundColor" :reverse='reverse' v-else-if="level==13">
    <slot></slot>
  </dv-border-box13>
  <div v-else>
    <slot></slot>
  </div>
</template>

<script>
import {defineComponent} from 'vue'


export default defineComponent({
  name: "my-border",
  props: {
    level: {
      type: Number,
      required: true
    },
    color: Array,
    backgroundColor: String,
    reverse: Boolean,
    title: String
  }
})
</script>

<style scoped>

</style>
